<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-25 17:29:35
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-29 09:52:16
 * @FilePath: \shangyitong\src\pages\hospital\register\register_step2.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="container">
		<h1 class="tip">确认挂号信息</h1>
		<!--展示 就诊人挂号信息 -->
		<el-card class="box-card">
			<!-- 卡片头部 -->
			<template #header>
				<div class="card-header">
					<span>请选择就诊人</span>
					<el-button
						type="primary"
						size="default"
						@click="addVisitor"
						icon="User"
						>添加就诊人</el-button
					>
				</div>
			</template>
			<!-- 卡片身体部分展示就诊人详细信息 -->
			<div class="user">
				<Visitor v-for="(item,index) in visitorArr" :key="item.id" class="item" :visitor="item" :index="index" :currentIndex="currentIndex" @click="selectVisitor(index)"></Visitor>
			</div>
		</el-card>
		<!-- 卡片展示医生信息 -->
		<el-card class="box-card cardBottom">
			<!-- 卡片头部 -->
			<template #header>
				<div class="card-header">
					<span>挂号信息</span>
                    <el-button type="primary" :disabled="currentIndex==-1" @click="submit">确认挂号</el-button>
				</div>
			</template>
			<!-- 卡片身体展示医生信息 -->
			<div class="table">
				<el-descriptions class="margin-top" :column="2" border>
					
					<el-descriptions-item label-width="150">
						<template #label>
							<div class="cell-item">就诊日期:</div>
						</template>
						{{doctorInfo.workDate||"暂无"}}
					</el-descriptions-item>
					<el-descriptions-item label-width="150">
						<template #label>
							<div class="cell-item">就诊医院</div>
						</template>
						{{doctorInfo.param?.hosname||"暂无"}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">就诊科室</div>
						</template>
                        {{doctorInfo.param?.depname||"暂无"}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">医生姓名</div>
						</template>
						<el-tag size="small">{{doctorInfo.docname||'裴钰'}}</el-tag>
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">医生职称</div>
						</template>
						{{doctorInfo.title||"主任医师"}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">医生专长</div>
						</template>
						{{doctorInfo.ski11||'内分泌与代谢性疾病'}}
					</el-descriptions-item>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">								
								医事服务费
							</div>
						</template>
						<el-tag size="small">{{doctorInfo.amount||100}}</el-tag>
					</el-descriptions-item>
				</el-descriptions>
			</div>
		</el-card>
	</div>
</template>

<script setup lang="ts">
import Visitor from '@/components/visitor/index.vue'
import {reqGetUser,reqGetDoctorInfo} from '@/api/hospital/index'
import type {VisitorArr,VisitorResponseData,DocrorInfoData} from '@/api/hospital/type'
import{reqSubmitOrder} from'@/api/user/index'
import type {SubmitOrder} from '@/api/user/type'
import {onMounted,ref} from 'vue'
import { useRoute,useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
let $route = useRoute()
let $router = useRouter()
//获取全部就诊人信息列表数组
let visitorArr = ref<VisitorArr>([])
//存储医生的信息
let doctorInfo = ref<any>({})
//存储用户选择的就诊人信息索引
let currentIndex = ref<number>(-1);
const selectVisitor = ($index:number)=>{
    //存储当用户选择的就诊人信息的索引值
    currentIndex.value = $index;
}
onMounted(()=>{
    //获取就诊人信息里列表数组
    fetchUserData()
    //获取就诊人信息
    fetchDoctorInfo()
})
const fetchUserData=async()=>{
    //获取就诊人信息:当前老师帐号下已经有四个就诊人信息
    //如果你是新的帐号,切记在已经写好的项目中,先注册几个就诊人信息
   let result:VisitorResponseData = await reqGetUser()
   if(result.code==200){
    visitorArr.value=result.data
   }
}
const fetchDoctorInfo =async ()=>{
    //6225753136a9ba1be763dc10
  let result:DocrorInfoData = await reqGetDoctorInfo($route.query.docId as string)
//   console.log("result",result)
  if(result.code==200){
    doctorInfo.value=result.data
  }
}
//预约挂号添加添加就诊人信息
const addVisitor = () => {
    $router.push({
        path:"/user/patient",
        query:{
            type:'add'
        }
    })
}
//确定挂号 提交订单
const submit=async()=>{
    //医院编号 
    // let hosCode = doctorInfo.value.hoscode;
    let hosCode = '1000_0';
    //医生的id
    // let scheduleld = doctorInfo.value.id;
    let scheduleld = '6225753136a9ba1be763dc10';
    //就诊人id
    let patientId = visitorArr.value[currentIndex.value].id;
   let result:SubmitOrder = await reqSubmitOrder(hosCode,scheduleld,patientId)
   
   if(result.code==200){
    $router.push({
        path:"/user/order",
        query:{
            orderId:result.data
        }
    })
   }else{
    ElMessage({
        type:'error',
        message:result.message
    })
   }    
}
</script>

<style lang="scss" scoped>
.container {
	.tip {
		font-weight: 900;
		color: #7f7f7f;
		margin-bottom: 10px;
	}
	::v-deep(.el-card__header) {
		border-bottom: 1px solid var(--el-card-border-color);
		box-sizing: border-box;
		padding: 10px;
	}
	::v-deep(.el-card__body) {
		padding: 2px 0px 2px 5px;
	}
	.box-card {
		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.user {
			display: flex;
			// justify-content: start;
			flex-wrap: wrap;
			border-radius: 15px;
			max-height: 500px;
			overflow: auto;
            cursor: pointer;
			.item {
				width: 32%;
				margin: 5px;
			}
		}
	}
	.cardBottom {
		margin: 10px 0 0 0;
	}
}
</style>
